<!DOCTYPE html>
<html>
<head>
    <title>Fixed Headers</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" id="listview-headers" data-init="mobileListViewHeadersInit" data-title="Fixed Headers">
    <ul id="fixed-listview"></ul>
</div>

<script type="text/x-kendo-template" id="listviewHeadersTemplate">
    <img class="item-photo" src="${url}" />
    <h3 class="item-title">${name}</h3>
    <p class="item-info">${description}</p>
    <a data-role="button" class="details-link">Order</a>
</script>

<script>
    var groupedData = [
        { name: "Sashimi Salad", description: "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.", url: "../../content/mobile/listview/sashimi-salad.jpg", letter: "S" },
        { name: "Seaweed Salad", description: "A nice seaweed salad.", url: "../../content/mobile/listview/seaweed-salad.jpg", letter: "S" },
        { name: "Edamame", description: "Boiled soy beans with salt.", url: "../../content/mobile/listview/edamame.jpg", letter: "E" },
        { name: "Maguro", description: "Tuna pieces.", url: "../../content/mobile/listview/maguro.jpg", letter: "M" },
        { name: "Tekka Maki", description: "Tuna roll with wasabi.", url: "../../content/mobile/listview/tekka-maki.jpg", letter: "T" },
        { name: "California Rolls", description: "Crab sticks, avocado and cucumber.", url: "../../content/mobile/listview/california-rolls.jpg", letter: "C" }
    ];

    function mobileListViewHeadersInit() {
        $("#fixed-listview").kendoMobileListView({
            dataSource: kendo.data.DataSource.create({data: groupedData, group: "letter" }),
            template: $("#listviewHeadersTemplate").html(),
            headerTemplate: "${value}",
            fixedHeaders: true
        });
    }
</script>

<style scoped>
.item-photo {
    width: 4em;
    height: 4em;
    float: left;
    margin: .5em 0;
    -webkit-box-shadow: 0 1px 3px #333;
    box-shadow: 0 1px 3px #333;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

#custom-listview .item-title {
	float: left;
	font-size: 1em;
    line-height: 1.4em;
    margin: .3em 1em 0 .6em;
    width: 50%;
}
#custom-listview .item-info {
	float: left;
	font-size: .7em;
	line-height: 1em;
    margin: 0 0 0 .95em;
    width: 45%;
}

.details-link {
    margin-top: -1.2em;
    position: absolute;
    right: 0.6em;
    top: 50%;
}
.km-listview .km-list {
    margin: 0;
}
</style>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
